<template>
  <div class="menphis">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt="" class="img_zuo" @click="back" />
        <div>{{title}}辖企档案</div>
<!--        <span class="btn-change">切换</span>-->
      </div>
    </header>
    <div class="main">
      <div class="main-header">
        <div style="height: 10px;background-color: #f2f2f2"></div>
        <div class="main-list">
          <div class="main-wh wh-mc"></div>
          <div class="main-wh">建筑物</div>
          <div class="main-wh">九小门店</div>
          <div class="main-wh">住改非</div>
          <div class="main-wh">企业</div>
        </div>
      </div>
      <div class="index">
        <div class="main-list">
          <div class="main-wh wh-mc">合计</div>
          <div class="main-wh wh-col">{{ community.jzwCount }}</div>
          <div class="main-wh wh-col">{{ community.jxCount }}</div>
          <div class="main-wh wh-col">{{ community.count }}</div>
          <div class="main-wh wh-col">{{ community.qyCount }}</div>
        </div>
        <div class="main-list" v-for="(item, index) in dataList" :key="index">
          <div class="main-wh wh-mc">{{ item.dwmc }}</div>
          <div class="main-wh wh-col" @click="toListJzw(item)">{{ item.jzwCount?item.jzwCount:0 }}</div>
          <div class="main-wh wh-col" @click="toListJxmd(item)">{{ item.jxCount?item.jxCount:0 }}</div>
          <div class="main-wh wh-col" @click="toList(item)">{{ item.count?item.count:0 }}</div>
          <div class="main-wh wh-col" @click="toListQy(item)">{{ item.qyCount?item.qyCount:0 }}</div>
        </div>
      </div>
    </div>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
  import qs from "qs";
  import {Toast} from "vant";
  import Tabbar from "../tabbar.vue";

  export default {
    data () {
      return {
        jdId: '',
        community: {},
        userId: '2140',
        dataList: [],
        title:''
      };
    },
    components: {
      Tabbar
    },
    created(){
       this.title = localStorage.getItem('Title')
    },
    mounted() {
      let that = this;
      that.userId = localStorage.getItem('userId');
      that.jdId = sessionStorage.getItem('jdid')
      that.community = sessionStorage.getItem('community')?JSON.parse(sessionStorage.getItem('community')):{};
      that.queryList()

      //物理返回
      // window.addEventListener("popstate", function(){
      //   that.back();
      // }, false);
    },
    methods: {
      back(){
        // if(this.community.from){
        //   this.$router.push(this.community.from);
        // }else{
        //   this.$router.push("/switch");
        // }
        this.$router.back()
      },
      toList(item){
        var xqda_params = {
            path:'/switch_address',//列表或地图页面返回的路径
            cs_cx:{//列表或地图页面查询参数
              dwid:this.jdId,
              sqid:item.dwid
            },
            title:item.dwmc
          };
          xqda_params.cx_type = 'zgf';
          localStorage.setItem("xqda_params",JSON.stringify(xqda_params));
         this.$router.push({
           path: '/mode_list'
         })
      },
      toListJzw(item){
        var xqda_params = {
            path:'/switch_address',//列表或地图页面返回的路径
            cs_cx:{//列表或地图页面查询参数
              dwStreetId:this.jdId,
              dwCommunityId:item.dwid
            },
            title:item.dwmc
          };
          xqda_params.cx_type = 'jzw';
          localStorage.setItem("xqda_params",JSON.stringify(xqda_params));
       this.$router.push({
         path: '/mode_list_jzw'
       })
      },
      toListJxmd(item){
        var xqda_params = {
            path:'/switch_address',//列表或地图页面返回的路径
            cs_cx:{//列表或地图页面查询参数
              streetId:this.jdId,
              communityId:item.dwid
            },
            title:item.dwmc
          };
          xqda_params.cx_type = 'jxmd';
          localStorage.setItem("xqda_params",JSON.stringify(xqda_params));
       this.$router.push({
         path: '/mode_list_jxmd'
       })
      },
      toListQy(item){
        var xqda_params = {
           path:'/switch_address',//列表或地图页面返回的路径
           cs_cx:{//列表或地图页面查询参数
             communityId:item.dwid
           },
           title:item.dwmc
        };
        xqda_params.cx_type = 'qy';
        localStorage.setItem("xqda_params",JSON.stringify(xqda_params));
        this.$router.push({
          path: '/mode_list_qy'
        })
      },
      queryList () {
        let that = this;
        let data = {
          userId: that.userId,
          jdId: that.jdId
        }
        that.axios.post(`${that.$global_msg.Url.host}/yjzgf/selectCommunity`,
          qs.stringify(data)).then(res => {
          if (res.data.code === 200) {
            that.dataList = res.data.rows
          } else if (res.data.code === 101){
            Toast({message: '当前无数据'})
          } else {
            Toast({message: '数据加载失败，请刷新页面重试'})
          }
        }).catch(error => {
          that.$terminal._error(error);
        });
      }
    }
  }
</script>

<style scoped>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  .menphis {
    min-height: 100vh;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }
  .index {
    padding-top: 162px;
  }
  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .btn-change{
    position: absolute;
    left: 1.537037rem;
    font-size: 0.388888rem;
    bottom: 0.444444rem;
  }
  .main {
    padding-top: 1.8519rem;
    padding-bottom: 1.662963rem;
  }
  .main-header {
    position: fixed;
    width: 100%;
    background-color: #fff;
    z-index: 999;
  }
  .main-list {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 40px 20px;
    border-bottom: 1px solid #aaaaaa;
    margin-left: 0.185185rem;
    margin-right: 0.185185rem;
  }
  .main-wh {
    flex: 1;
    text-align: center;
    color: #666666;
    font-size: 0.388888rem;
  }
  .wh-col {
    color: #748bfd;
  }
  .wh-mc{
    width: 2.5rem;
    flex: none !important;
  }
</style>
